/* 公用 */
/* 布局 */
.section {
	padding: 20rpx 0;
}

/* 列表展示的标题区 */
.section-title-bar {
	padding: 18rpx 32rpx;
	height: 50rpx;
	font-size: 16px;
}

.row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 20rpx 0;
	width: 100%;
}

/* 单页 */
.single-bar {}

.single-item {}
.single-item image{
	width: 100%;
}

/* 列表 */
.list-bar {}

.list-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 20rpx 0;
	width: 100%;
}

/* 图文列表 */
.imglist-bar {}

.imglist-item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 20rpx 0;
	width: 100%;
	height: 140rpx;
}

.imglist-item .thumb {
	margin-right: 14rpx;
	width: 160rpx;
	height: 140rpx;
	border-radius: 10rpx;


}

.imglist-item .thumb image {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}

.imglist-item .text-bar {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
}

/* 宫格 */
.grid-bar {
	/* flex布局: 一行显示固定个数。（父元素） */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

/* 宫格元素 2*2 */
.grid-item2 {
	min-height: 50rpx;
	/* flex布局: 一行显示固定个数。（子元素）。 */
	flex: 1;
	margin: 0 40rpx 40rpx 0;
	/* 间隙 */
	width: calc((100% - 40rpx) / 2);
	/* (分布个数-1)*间隙 */
	min-width: calc((100% - 40rpx) / 2);
	/* 加入这两个后每个item的宽度就生效了 */
	max-width: calc((100% - 40rpx) / 2);
}

/* 加入这两个后每个item的宽度就生效了 */
.grid-item2:nth-child(2n) {
	/* 去除最右边的margin-right */
	margin-right: 0;
}

/* 宫格元素 4*4 */
.grid-item4 {
	min-height: 50rpx;
	/* flex布局: 一行显示固定个数。（子元素）。 */
	flex: 1;
	margin: 0 10rpx 10rpx 0;
	/* 间隙为5px */
	width: calc((100% - 30rpx) / 4);
	/* 这里的15px = (分布个数4-1)*间隙5px, 根据实际的分布个数和间隙区调整 */
	min-width: calc((100% - 30rpx) / 4);
	/* 加入这两个后每个item的宽度就生效了 */
	max-width: calc((100% - 30rpx) / 4);


}

/* 加入这两个后每个item的宽度就生效了 */
.grid-item4:nth-child(4n) {
	/* 去除第4n个的margin-right */
	margin-right: 0;
}

/* 大图列表 */
.img-bar {
	width: 100%;
}

.img-item {
	position: relative;
	margin: 20rpx 0;
	text-align: center;
}

.img-item image {
	bottom: 0;
	width: 100%;
	border-radius: 10rpx;
}

.img-item .title {
	position: absolute;
	bottom: 0;
	padding: 20rpx 0rpx;
	width: 100%;
	background-color: rgba(51, 175, 113, .8);
	font-size: 18px;
	color: #fff;
	border-radius: 50rpx;
	box-sizing: border-box;
}